<template>
  <div class="box_container">
    <a-form
      :form="form"
      :label-col="{span: 8, offset: 1}"
      :wrapper-col="{span: 15}"
    >
      <a-row>
        <a-col :md="8" :sm="24">
          <a-form-item label="用户名">
            <a-input
              disabled
              v-decorator="['username', validatorRules.username]"
              placeholder="请输入"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="密码">
            <a-input
              :max-length="passwordLength"
              v-decorator="['passwords', validatorRules.passwords]"
              placeholder="请输入"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="8" :sm="24">
          <a-form-item label="员工">
            <a-select
              show-search
              option-filter-prop="children"
              :filter-option="filterOption"
              v-decorator="['employeeId', validatorRules.employeeId]"
              placeholder="请选择">
              <a-select-option
                v-for="(item, index) in employees"
                :value="item.id"
                :title="item.username"
                :key="index">
                <span
                  style="display: inline-block;width: 100%"
                  :title="item.username">
                  {{ item.username }}
                </span>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="部门">
            <a-input
              disabled
              v-decorator="['departmentName', validatorRules['departmentName']]"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="8" :sm="24">
          <a-form-item label="用户角色">
            <a-select
              v-decorator="['role.id', validatorRules['role.id']]"
              placeholder="请选择用户角色">
              <a-select-option
                v-for="(item, index) in roleNames"
                :value="item.id"
                :key="index">
                <span
                  style="display: inline-block;width: 100%"
                  :title="item.name">
                  {{ item.name }}
                </span>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="用户状态">
            <a-select
              v-decorator="['userStatus', validatorRules['userStatus']]"
              placeholder="请选择用户状态">
              <a-select-option key="Y" value="Y">
                <span
                  style="display: inline-block;width: 100%"
                  title="启用">启用</span>
              </a-select-option>
              <a-select-option key="N" value="N">
                <span
                  style="display: inline-block;width: 100%"
                  title="废弃">废弃</span>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="8" :sm="24">
          <span class="table-edit-submitButtons">
            <a-button type="primary" class="ml8" @click="submitForm('ruleFormUser')">保存</a-button>
            <a-button class="ml8" @click="$emit('update:showChild', false)">取消</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import {aesDecryptData} from "@/utils/secret"
export default {
  name: 'EditUser',
  props: {
    showChild: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      passwordLength: 20,
      form: this.$form.createForm(this, {}),
      ruleFormUser: {
        // 账户表单
        username: '',
        employeeId: null,
        roleName: '',
        id: '',
        userStatus: '',
        role: { id: null }
      },
      validatorRules: {
        username: { rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }] },
        passwords: { rules: [{ required: true, message: '请输入密码', trigger: 'blur' }] },
        employeeId: { rules: [{ required: false, message: '请选择员工', trigger: 'blur' }] },
        'role.id': { rules: [{ required: false, message: '请选择用户角色', trigger: 'blur' }] },
        departmentName: { rules: [{ required: false, message: '请输入部门', trigger: 'blur' }] },
        userStatus: { rules: [{ required: false, message: '请选择用户状态', trigger: 'blur' }] }
      },
      beLongRoleId: null
    }
  },
  computed: {
    roleNames () {
      const list = this.$store.getters.roleNames.map((value, key) => {
        value['id'] = String(value['id'])
        return value
      })
      return list
    },
    employees () {
      return this.$store.getters.employees
    }
  },
  created () {
    this.ruleFormUser = Object.assign(this.ruleFormUser, this.formData)
    console.log('this.ruleFormUser', this.ruleFormUser)
  },
  mounted () {
    this.form.setFieldsValue({
      employeeId: this.ruleFormUser.employeeId,
      username: this.ruleFormUser.username,
      passwords: aesDecryptData(this.ruleFormUser.passwords, '$admin_key'),
      'role.id': this.filterRoleName(this.ruleFormUser.roleName),
      departmentName: this.ruleFormUser.departmentName,
      userStatus: this.ruleFormUser.userStatus
    })
  },
  methods: {
    filterRoleName (name) {
      let id = ''
      for (let i = 0; i < this.roleNames.length; i++) {
        if (this.roleNames[i]['name'] === name) {
          id = String(this.roleNames[i]['id'])
          break
        }
      }
      return id
    },
    submitForm (form) {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$emit('update:showChild', false)
          values.id = this.formData.id
          values.employeeId = String(values.employeeId)
          this.$emit('updateUser', values)
        }
      })
    },
    filterOption (input, option) {
      return option.componentOptions.propsData['title'].indexOf(input) >= 0
    }
  }
}
</script>

<style scoped>

</style>
